<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container1 {
   display: flex;
   justify-content: center;/*主轴方向 row*/
   align-items: center;/* 侧轴 单行*/
   border: #ccc 2px solid;/*实线*/
   height: 100px;
  }

 /* 方法2: 使用绝对定位和 transform */
 .container2 {
    position: relative; /*position: relative;: 这意味着 .container2 的子元素如果设置了 position: absolute; 或 position: fixed;，那么它们的定位将相对于 .container2 而不是整个文档。 */
    height: 100px; /* 为了演示效果设置高度 */
    border: 2px solid #ccc; /* 为了演示效果添加边框 */
    margin-bottom: 20px;
  }

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);/*这是一个 CSS 变换，用于将 .centered 元素从其当前位置（即其父元素的中心）平移向左和向上移动其自身宽度和高度的50%。这样做的效果是使 .centered 元素完全居中于其父元素内。*/
  }

  /* 方法3: 使用表格布局 */
  .container3 {
     display:  inline-block;/*在表格单元格中，会使元素在表格单元格中垂直居中以下操作，vertical-align 对块级元素（如 div）通常不起作用，除非这些元素被设置为 display: inline-block、display: table-cell 或其他内联值。 */
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 vertical-align: middle;确实会影响元素的垂直对齐，但它只适用于元素之间的对齐，而不是元素内部内容的对齐。 */
    height: 100px; /* 为了演示效果设置高度 */
    border: 2px solid #ccc; /* 为了演示效果添加边框 */
    margin-bottom: 20px;
    width: 100px;
  }

 
.box{
  display: inline-block;
}

/* 方法4：使用grid布局 */
  .container4{
    display: grid;
    place-content: center;
    height: 100px;
    border: 1px solid black;
  }

  .container5::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* 伪元素填充整个父容器 */
    height: 100%; /* 伪元素填充整个父容器 */
  }

  /* 为了展示效果，添加样式 */
  .box {
    background-color: lightblue;
    padding: 20px;
    border-radius: 5px;
  }
/* 5、 */
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */



    </style>
</head>
<body>
    <!-- 方法1: 使用 Flexbox 布局 -->
<!-- <div class="container1">
    <div class="box">示例</div>
</div> -->
    <!-- 方法2: 使用绝对定位和 transform -->
<div class="container2">
  <div class="centered box">示例</div>
</div>
  

  <!-- 方法3: 使用表格布局 -->
<!-- <div class="container3">
  <div class="box">示例</div>
</div> -->

<!-- 方法4:使用 Grid 布局 -->
 <!-- <div class="container4">
  <div class="center box">实例</div>
 </div> -->



</body>
</html>